<template>
	<view class="msj_caogao">
		<view v-if="isshow"  class="msj_caogao_list">
			<view v-for="(item,index) in user.caogao" :key="index" :style="{'marginRight':index%2==0?'30px':''}" class="msj_caogao_item">
				<image class="msj_caogao_imgs" v-if="item.imgurl[0]" :src="item.imgurl[0]" mode=""></image>
				<view v-else class="msj_caogao_imgs_none">
					<u-icon name="photo-fill" color="#999" size="28"></u-icon>
				</view>
				<view class="msj_caogao_bottom">
					<view class="msj_caogao_val">
						{{JSON.parse(item.xuanz).join('')}} {{ item.val}}
					</view>
					<view style="width: 100%; text-align: right; font-size: 13px; color: red;" class="">
						<text @click="dele(index)">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="content">
			<image src="../../../static/msj/caogao.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {getmsjusermy,updatemsjusermy} from '../../../utils/api.js'
	export default {
		data() {
			return {
				user:{},
				isshow:false
			}
		},
		onShow() {
			this.getusers()
		},
		onLoad() {
			this.getusers()
		},
		methods: {
			getusers(){
			let token = JSON.parse(uni.getStorageSync('token'))
				getmsjusermy(token.userid).then(res => {
				let data = res.data
				data.caogao = JSON.parse(data.caogao).map(v=>{
					v.imgurl=JSON.parse(v.imgurl)
					return v
				})
				this.user = data
				console.log(this.user);
				this.isshow=this.user.caogao.length>0?true:false
				})
			},
			dele(i){
				this.user.caogao.splice(i,1)
				let user=JSON.parse(JSON.stringify(this.user))
				user.caogao=user.caogao.map(v=>{
					v.imgurl=JSON.stringify(v.imgurl)
					return v
				})
				user.caogao=JSON.stringify(user.caogao)
				updatemsjusermy(user).then(res=>{
							uni.showToast({
										icon: 'success',
										title: '已删除',
										duration: 2000
							});
							this.getusers()		
				})
			}
		}
	}
</script>

<style>
	.msj_caogao{
		width: 100%;
	}
	.content {
		width: 100%;
		height: calc(100vh - 44px);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.content image{
		width: 200px;
	}
	.msj_caogao_list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 15px 15px 0;
	}
	.msj_caogao_item{
		width: 45%;
		background: #fff;
		box-shadow: 2px 2px 20px 2px #ddd;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 10px;
		margin-bottom: 10px;
	}
	.msj_caogao_imgs_none,.msj_caogao_imgs{
		width: 100%;
		height: 160px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.msj_caogao_imgs_none{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ccc;
	}
	.msj_caogao_bottom{
		width: 100%;
	}
	.msj_caogao_val{
		width: 100%; font-size: 17px; font-weight: 700;
		overflow: hidden; padding: 5px 0;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>